<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>作业二——效果图</title>
  </head>

  <!--------------------------------------页面修饰代码--------------------------------------------->
  <style>
    /*设置左右边距*/
    body{
      padding-left: 40px;
      padding-right: 40px;
    }
    /*顶部：左上角logo和右上角导航条、打折的图标*/
    .top{
      position: relative;
    }
    .upright{
      float:right;
      margin-top: 13px;
      margin-right: 0px;
    }
    .uprightli{
      position: relative;
      list-style: none;
      color:black;
      background-color:lightcyan;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
      float: left;
      line-height: 35px;
    }
    #icon_count{
      position:absolute;
      top:-12px;
    }
    /*导航栏*/
    .daohanglan{
      width: max-content;
      position: relative;
    }
    .guide{
      list-style: none;
      color:white;
      background-color:#ff7300;
      text-align: center;
      float: left;
      line-height: 35px;
    }
    /*图书榜单*/
    .bang{
      margin-top: 45px;
    }
    /*畅销榜*/
    #changxiaobang{
      margin-top: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      padding-bottom: 10px;
      border-style: solid;
      border-color: limegreen;
      border-width: 1px;
      background-color: white;
      height: 370px;
      position: relative;
    }
    #bg_bang{
      position: absolute;
      top: 20px;
      margin-left: -12px;
    }
    /*畅销榜书的介绍*/
    .detail{
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
    }
    /*书的排行*/
    .bookNo{
      position: absolute;
      top: -1500%;
      left: 8%;
    }
    /*具体的介绍区块*/
    .jieshao{
      float: right;
    }
    p{
      font-size: medium;
      height: 8px;
      margin-bottom: 4px;
    }
    /*榜一的内容简介*/
    #jianjie{
      line-height: 25px;
    }
    /*书名的字体*/
    .bookname{
      color: #00BFFF;
      font-weight: bolder;
      font-size: large;
      display: inline-block;
      margin-top: -10px;
    }
    /*价格的字体*/
    price{
      color: purple;
      font-weight: bolder;
    }
    /*折扣的字体*/
    discount{
      color: forestgreen;
      padding-left: 20px;
    }
    /*榜单的布局*/
    .bookleft{
      position: relative;
      float: left;
    }
    .bookright{
      position: relative;
      float: right;
      padding-right: 20px;
    }
    .bangdandiv23{
      position: relative;
      padding-bottom: 30px;
    }
    .bookNo23{
      position: absolute;
      top: -550%;
      left: 0%;
    }
    .bangtupian{
      position: relative;
      
    }
    /*页脚*/
    footer{
      position: relative;
      text-align: center;
      margin-top: 15px;
    }
    #footerimg{
      position: absolute;
      bottom: -20px;
    }
    #footerwords{
      padding-left: 40px;
    }
    #validate{
      position:absolute;
      bottom: 4px;
    }

    /* 特效 */
    li:hover{
      cursor: pointer;
      filter: brightness(120%);
    }
  </style>

  <!--------------------------------------页面正文开始--------------------------------------------->
  <body>
    <!--------------------------------------顶部logo--------------------------------------------->
    <div class="top">
      <a href="https://www.dangdang.com"><img src="image/logo.jpg" /></a>
      <div class="upright">
        <li class="uprightli"><img id="icon_count" src="image/icon_count.png"/>尾品汇</li>
        <li class="uprightli">当当优品</li>
        <li class="uprightli">数字馆</li>
        <li class="uprightli">都看阅器</li>
      </div>
    </div>
    <!--------------------------------------导航栏--------------------------------------------->
    <div class="daohanglan">
      <li class="guide" id="shouye">首页</li>
      <li class="guide">图书</li>
      <li class="guide">音像</li>
      <li class="guide">童装</li>
      <li class="guide">服装</li>
      <li class="guide">鞋靴</li>
      <li class="guide">活动</li>
      <li class="guide">箱包</li>
      <li class="guide">美妆</li>
      <li class="guide">珠宝</li>
      <li class="guide">家居</li>
      <li class="guide">食品</li>
      <li class="guide">酒</li>
      <li class="guide">手机</li>
      <li class="guide">数码</li>
      <li class="guide">电脑</li>
      <li class="guide">家电</li>
    </div>
    <!--------------------------------------当当图书榜--------------------------------------------->
    <div class="bang">
      <img id="banner" src="image/banner.png"/>
    </div>
    <!--------------------------------------推荐书--------------------------------------------->
    <div id="changxiaobang">
      <div class="bang" style="height: 40px">
        <img src="image/bg_bang.gif" id="bg_bang"/>
      </div>
      <!-------------------------------------三个部分-------------------------------------------->
      <div class="detail">
        <!------------------------------------榜一------------------------------------------->
        <span class="bookleft">
          <img class="bookNo" src="image/bookNo1.gif" />
          <img id="book01" src="image/book-01.jpg" />
          <!----------------------------------具体介绍----------------------------------------->
          <span class="jieshao">
            <p class="bookname">偷影子的人</p>
            <p>作者：[法]马克·李维（Marc Levy）著</p>
            <p>出版社：湖南文艺出版社</p>
            <p>当当价：<price>¥ 17.90</price></p>
            <p id="jianjie">不知道姓氏的克蕾儿,这就是你在我生命里的角色。
              我童年时的小女孩，今日蜕变成了女人。一段青梅竹
              马的回忆，一个时间之神没有应允的愿望。一个老
              是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
              能力而强大：他能“偷别人的影子”。</p>
          </span>
        </span>
        <!------------------------------------榜二榜三------------------------------------------->
        <span class="bookright">
          <!------------------------------------榜二------------------------------------------->
          <div class="bangdandiv23">
            <span class="bangtupian">
              <img class="bookNo23" src="image/bookNo2.gif" />
              <img id="book02" src="image/book-02.jpg" />
            </span>
            <span class="jieshao">
              <p class="bookname">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</p>
              <p>作者：柴静 著</p>
              <p>出版社：广西师范大学出版社</p>
              <p><price>¥ 29.40</price><discount>7.4折</discount></p>
            </span>
          </div>
          <!------------------------------------榜三------------------------------------------->
          <div class="bangdandiv23">
            <span class="bangtupian">
              <img class="bookNo23" src="image/bookNo3.gif" />
              <img id="book03" src="image/book-03.jpg" />
            </span>
            <span class="jieshao">
              <p class="bookname">改变孩子先改变自己</p>
              <p>作者：贾容韬 贾毂 著</p>
              <p>出版社：作家出版社</p>
              <p><price>¥ 22.20</price><discount>7.4折</discount></p>
            </span>
          </div>
        </span>
      </div>
    </div>
    <!--------------------------------------页脚--------------------------------------------->
    <footer>
        <span>Copyright（C）当当网2004-2017,All Rights Reserved</span>
        <span id="footerimg"><img src="image/validate.gif" id="validate"/></span>
        <span id="footerwords">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
    </footer>
    <!--------------------------------------JavaScript运行代码部分--------------------------------------------->
    <script>
      var a = document.getElementsByClassName("guide");
      var ww = document.body.clientWidth - 80;
      //使导航栏每个栏目都能平分显示的窗口的宽度
      for(var i = 0;i < a.length; i++){
        a[i].style.width = (ww / 17) + "px";
      }
      //使图片与显示的窗口大小相同
      document.getElementById("banner").style.width = ww + "px";
      document.getElementById("changxiaobang").style.width = ww + "px";
      var jieshao = document.getElementsByClassName("jieshao");
      //调整图书内容介绍区块的宽度
      for(var i = 0;i < jieshao.length;i++){
        jieshao[i].style.width = (ww / 19 * 6) + "px";
      }
    </script>
  </body>
</html>